import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';

declare var PhotoSwipe: any;
declare var PhotoSwipeUI_Default: any;
declare var document: any;


@IonicPage()
@Component({
  selector: 'photo-modal',
  templateUrl: 'photo-modal.html',
})
export class PhotoModalPage {
  posts = [];

    items=[];
    pswpElement;
    gallery;


  constructor(public navCtrl: NavController, public navParams: NavParams, 
    private nativePageTransitions: NativePageTransitions) {
  }

  ionViewDidLoad() {
    this.posts = [
      {
        description: 'Trying out digital painting',
        image: 'https://tse1-mm.cn.bing.net/th?id=OIP.qe-gscJRt7bl2aWDuxfqeAHaFj&w=231&h=173&c=7&o=5&pid=1.7',
        w: 231,
        h: 173        
      },
      {
        description: '',
        image: ''
      },
      {
        description: 'Look at this amazing clay humming bird I crafted!',
        image: ''
      },
      {
        description: 'Origami tullip tutorial',
        image: ''
      },
      {
        description: '',
        image: ''
      },
      {
        description: '',
        image: 'https://tse1-mm.cn.bing.net/th?id=OIP.VEupAZpNmSdinZicw-oh-QHaEK&w=234&h=160&c=7&o=5&pid=1.7',
        w: 234,
        h: 160        
      },
      {
        description: 'Delicious chocolate bread recipe!',
        image: 'https://tse1-mm.cn.bing.net/th?id=OIP._tzSIqdu9Ua3aGfnGBrzfAHaEK&w=300&h=168&c=7&o=5&pid=1.7',
        w: 300,
        h: 168        
      },
      {
        description: '',
        image: 'https://tse1-mm.cn.bing.net/th?id=OIP.7BuhSMPYLQqruILu8YFKKQHaH7&w=178&h=191&c=7&o=5&pid=1.7',
        w: 178,
        h: 191        
      },
      {
        description: '',
        image: 'https://tse4-mm.cn.bing.net/th?id=OIP.rfU4rTmf0ZhSLLgIULkw3QHaEo&w=251&h=160&c=7&o=5&pid=1.7',
        w: 251,
        h: 160        
      },
      {
        description: '',
        image: 'https://tse2-mm.cn.bing.net/th?id=OIP.ObjO3tFLmUPnnrMHpyZx5gHaFU&w=225&h=161&c=7&o=5&pid=1.7',
        w: 225,
        h: 161        
      },
      {
        description: 'Fastest car of all times',
        image: 'https://tse3-mm.cn.bing.net/th?id=OIP.LR1EWcFdBaQdJoU7ZUDIDwHaGV&w=162&h=177&c=7&o=5&pid=1.7',
        w: 162,
        h: 177
      },
    ];

    try {

        for (var i = 0; i < this.posts.length; i++) {
            if (this.posts[i]["image"].length > 9) {
                var objs = {};
                objs["src"] = this.posts[i]["image"];
                objs["w"] = this.posts[i]["w"] * 3 || "600";
                objs["h"] = this.posts[i]["h"] * 3 || "600";
                objs["title"] = this.posts[i]["description"];
                this.items.push(objs);
            }
        }

    } catch (error) { }


  }

    //查看图
    pswpElementInit(idx) {

        if (this.pswpElement == null) {
            this.pswpElement = document.querySelectorAll('.pswp')[0];
        }

        // define options (if needed)
        var options:any = {
            // optionName: 'option value'
            index: idx * 1, // start at first slide
            shareEl : false,
            fullscreenEl : false,
        };


        // Initializes and opens PhotoSwipe  
        this.gallery = new PhotoSwipe(this.pswpElement, PhotoSwipeUI_Default, this.items, options);
        this.gallery.listen('close', function () {
            //你要监听关闭浏览事件的话
        });

        this.gallery.init();

    }  

  ionViewWillLeave() {

   let options: NativeTransitionOptions = {
      direction: 'right',
      duration: 400,
      slowdownfactor: -1,
      iosdelay: 50
     };

   this.nativePageTransitions.slide(options)
     .then(function(){})
     .catch(function(){});

  }

}	